<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>my first export PDF</title>
    <script>
        //引入的pdfmake就是从pdfmake中的添加字体后build文件夹
    </script>
    <script src="./build/pdfmake.js"></script>
    <script src="./build/vfs_fonts.js"></script>
    <script src="./xlsx-js-style/dist/xlsx.min.js"></script>
    <script>
        function downPDF() {
            var dd = {
  // watermark: { text: '乐恒', font: 'SourceHanSansCN' } || '',
  pageSize:'A4',
  // pageOrientation: 'portrait',
//   pageMargins: [
//     cardLeft,
//     cardTop,
//     cardLeft,
//     cardTop,
//   ],
  content: [
    {

			table: {
				headerRows: 1,
				body: [
					[{text: 'Header 1'}, {text: 'Header 2', style: 'tableHeader'}, {text: 'Header 3', style: 'tableHeader'}],
					['我是中文ple value 1', 'Sample value 2', 'Sample valfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff《蜀道难》是唐代大诗人李白的代表诗作。此诗袭用乐府旧题深受学者好评。fffffffffffffffffffffffffffffffffffffffffffue 3'],
					['Sample value 1', 'Sample value 2', 'Sampl就有点e value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
                   ['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],

				],
      
			},
      style:'tableExample'
		},

],
  styles:{		tableExample: {
    margin: [0, 5, 0, 15],
    font: 'SourceHanSansCN',
    color:'red',
  },},
  defaultStyle:{
    defaultStyle: {
      font: 'SourceHanSansCN'
    },
  }
}
            pdfMake.fonts = {
                /*
                添加字体
                打开项目的node_modules->pdfmake
                创建/examples/fonts 文件夹，
                把字体库拷贝到examples/fonts
                然后在目录node_modules->pdfmake里
                执行 node build-vfs.js "./examples/fonts
                1.pdfmake Font 'Roboto' in style 'bold' is not defined in the font section of报错
                  添加上pdfMake.fonts中添加Roboto对象，pdfmake默认的字体
                2.File 'Roboto-Regular.ttf' not found in virtual file system,
                查看node_modules/pdfmake/build/vfs_fonts.js文件中是否有roboto属性(其字体编码)，没有的话下载https://github.com/bpampuch/pdfmake替换node_modules整个pdfmake包
                原因是默认npm下来的包build有问题，执行node build-vfs.js会把/examples/fonts文件包含的字体（原包里没有roboto.tff）转编码生成新的vfs_fonts.js文件导致pdfmake默认使用的roboto字体编码丢失，
                使用地址文件后可以看到/examples/fonts中内置了roboto的几款字体，并且vfs_fonts.js的暴露属性方式也优化了。
                改正后
                检查打印的vfs，和build/vfs_fonts.js源文件中引入的文件是否包含roboto属性及编码
                源文件有，引用文件没有找到.vite删掉缓存，并清理浏览器缓存，重启项目，打印的vfs必须要包含roboto字体和自己引用的字体才生效*/
                Roboto: {
                    normal: 'Roboto-Regular.ttf',
                    bold: 'Roboto-Medium.ttf',
                    italics: 'Roboto-Italic.ttf',
                    bolditalics: 'Roboto-Italic.ttf'
                },
                SourceHanSansCN: {
                    normal: 'SourceHanSansCN-Normal.ttf',
                    bold: 'SourceHanSansCN-Normal.ttf',
                    italics: 'SourceHanSansCN-Normal.ttf',
                    bolditalics: 'SourceHanSansCN-Normal.ttf',
                }
            };
            console.log(pdfMake,)
            
            console.log(vfs)
            pdfMake.vfs = vfs
            pdfMake.createPdf(dd).download("test.pdf");
        }
        function downXlsx(params) {
            const data = [
    { 姓名: "张三", 年龄: 18, 性别: "男" },
    { 姓名: "李四", 年龄: 20, 性别: "女" },
    { 姓名: "王五", 年龄: 22, 性别: "男" },
  ];
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(data);
  // s 表示要合并的单元格范围的左上角单元格，r 表示该单元格的行号，c 表示该单元格的列号，行列号从 0 开始计数。所以 { r: 0, c: 0 } 表示第 1 行第 1 列的单元格，即 A1 单元格。
  // e 表示要合并的单元格范围的右下角单元格，其含义与 s 相同。所以 { r: 0, c: 1 } 表示第 1 行第 2 列的单元格，即 B1 单元格。
  // 因此，{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示要合并第 1 行第 1 列和第 1 行第 3 列之间的元格。
  // 注意，合并会以开始位置单元格中的内容为准，所以合并后的单元格中的内容为 A1 单元格中的内容。
  ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];
  ws["!cols"] = [
    {
      wpx: 150,
    },
    {
      wpx: 500,
    },
    {
      wpx: 100,
    },
  ];
  ws["B2"].s = {
    alignment: { horizontal: "center" },
    font: { bold: true },
    fill: { fgColor: { rgb: "FFFF0000" } },
  };
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "example.xlsx"); 
        }
    </script>
</head>
<body>
<button onclick="downPdf()">下载PDF</button>
<button onclick="downXlsx()">下载XLSX</button>
</body>
</html>